<template>
  <div class="app-container">
    <el-card style="height: 100%;">
      <div class="inforClass">任务信息</div>
      <el-form ref="formQuery" :model="routeQuery" label-width="80px" label-suffix=":" style="padding: 10px 0">
        <el-row>
          <el-col :span="6">
            <el-form-item label="任务名称">
              <!-- {{ routeQuery.name }} -->
              <el-tooltip class="item" effect="dark" :content="routeQuery.name" placement="top-start">
                <span>{{ routeQuery.name.length > 15 ? routeQuery.name.slice(0, 15) + '...' : routeQuery.name }}</span>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实践课程">
              <!-- {{ routeQuery.type == 1 ? '劳动教育' : routeQuery.type == 2 ? '职业素养' : routeQuery.type == 3 ? '应急安全' :
                routeQuery.type == 4 ? '思政实践' : '创新创业' }} -->
                {{ (practiceTypeList.find(v => v.id == routeQuery.type) || {}).name }}
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="报名状态">
              {{ routeQuery.statu }}
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="报名审核规则" label-width="120px">
              {{ routeQuery.applyCheck }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="任务时间">
              {{ routeQuery.time }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属学期">
              {{ routeQuery.semester }}
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="人数">
              {{ routeQuery.applyPassPeoples || 0 }} / {{ routeQuery.score }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="inforClass" style="margin-bottom: 10px;">实践任务报名情况</div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <el-form-item label="学院">
          <el-select v-model="queryParams.xyId" @change="handlelistProbj('学院')" filterable placeholder="请选择" clearable>
            <el-option v-for="item in proxyList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业">
          <el-select v-model="queryParams.zyId" @change="handlelistProbj('专业')" filterable placeholder="请选择" clearable>
            <el-option v-for="item in prozyList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="queryParams.bjId" @change="handlelistProbj" filterable placeholder="请选择" clearable>
            <el-option v-for="item in probjList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.participationStatus" placeholder="请选择" clearable
            @change="queryParams.currentPage = 1, handlelistProbj()">
            <el-option v-for="item in stateList" :key="item.id" :label="item.text" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="queryParams.studentName" @input="queryParams.currentPage = 1, quizXy()" placeholder="请输入"
            clearable />
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="queryParams.stNumber" @input="queryParams.currentPage = 1, quizXy()" placeholder="请输入"
            clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain icon="el-icon-refresh" size="mini" style="font-size: 14px;"
            @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableList">
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column label="姓名" align="center" prop="studentName" />
        <el-table-column label="学号" align="center" prop="stNumber" />
        <el-table-column label="学院" align="center" prop="xyName" />
        <el-table-column label="专业" align="center" prop="zyName" />
        <el-table-column label="年级" align="center" prop="nj" />
        <el-table-column label="班级" align="center" prop="bjName" />
        <el-table-column label="报名状态" align="center" prop="unSubmittedPeoples">
          <template slot-scope="scope">
            {{ scope.row.participationStatus == 0 ? '未报名' :
              scope.row.applyCheck === 1 && scope.row.participationStatus == 1 ? '未审核' :
                scope.row.participationStatus == 2 ? '已通过' :
                  scope.row.applyCheck === 1 && scope.row.participationStatus == 3 ? '已驳回' :
                    '' }}
          </template>
        </el-table-column>
        <el-table-column label="报名时间" align="center" prop="time">
          <template slot-scope="scope">
            {{ (scope.row.applyTime || '').slice(0, 16) }}
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="quizXy" />
    </el-card>
  </div>
</template>

<script >
import { typeCongfigList } from "@/api/semesManage";
import { listProxyPost, listProzyPost, listProbjPost } from "@/api/project/prold";
import { enrollCount } from "@/api/semesManage";
export default {
  name: 'applicaCompletion',
  data() {
    return {
      loading: false,
      open: false,
      tableList: [],
      total: 0,
      // 查询参数
      queryParams: {
        studentName: '',
        stNumber: '',
        currentPage: 1,
        currentSize: 10,
      },
      xyName: '',
      zyName: '',
      bjName: '',
      practiceTypeList: [], // 实践课程
      form: {},
      routeQuery: {},
      stateList: [],
      proxyList: [],
      prozyList: [],
      probjList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      }
    }
  },
  created() {
    // const permissList = sessionStorage.getItem('practiceTypes').split(',');
    // const typeMap = {
    //   1: { type: '劳动教育', id: 1 },
    //   2: { type: '职业素养', id: 2 },
    //   3: { type: '应急安全', id: 3 },
    //   4: { type: '思政实践', id: 4 },
    //   5: { type: '创新创业', id: 5 }
    // };

    // permissList.forEach(v => {
    //   if (typeMap[v]) {
    //     this.practiceTypeList.push(typeMap[v]);
    //   }
    // });
    this.getTypeCongfigList();
    this.routeQuery = {
      ...this.$route.query
    };

    this.stateList = this.routeQuery.applyCheck == '无需审核，直接参与' ? [{ id: 0, text: '未报名' }, { id: 2, text: '已通过' }] : [{ id: 0, text: '未报名' }, { id: 1, text: '未审核' }, { id: 2, text: '审核通过' }, { id: 3, text: '已驳回' }];
    // this.stateList = this.routeQuery.applyCheck == '无需审核，直接参与' ? [{ id: 2, text: '无需审核' }] : [{ id: 0, text: '未报名' }, { id: 1, text: '未审核' }, { id: 2, text: '审核通过' }, { id: 3, text: '已驳回' }];
    this.getInit();
    this.quizXy();
  },
  mounted() { },
  methods: {
    getTypeCongfigList() {
      typeCongfigList({
        pageNum: 1,
        pageSize: 50,
      }).then(res => {
        this.practiceTypeList = res.rows;
      });
    },
    getInit() {
      let xyIds = this.$route.query.xyIdList.split(',');
      xyIds.forEach(v => {
        v = String(v);
      });
      let zyIds = this.$route.query.zyIdList.split(',');
      zyIds.forEach(v => {
        v = String(v);
      });
      let bjIds = this.$route.query.bjIdList.split(',');
      bjIds.forEach(v => {
        v = String(v);
      });
      listProxyPost({ xyIds }).then(response => {
        this.proxyList = response.rows;
      });
      listProzyPost({ xyIds, zyIds }).then(response => {
        this.prozyList = response.rows;
      });
      listProbjPost({ xyIds, zyIds, bjIds }).then(response => {
        this.probjList = response.rows;
      });

    },
    resetQuery() {
      this.queryParams = {
        currentPage: 1,
        currentSize: 10,
        studentName: '',
        stNumber: ''
      };
      this.resetForm("queryForm");
      this.getInit();
      this.quizXy();
    },
    handlelistProbj(type) {
      if (type === '学院') {
        this.queryParams.zyId = null;
        this.queryParams.bjId = null;
      } else if (type === '专业') {
        this.queryParams.bjId = null;
      }
      this.queryParams.currentPage = 1;
      this.changeSeletXs();
      this.quizXy();
    },
    changeSeletXs() {
      let zyIds = this.$route.query.zyIdList.split(',');
      zyIds.forEach(v => {
        v = String(v);
      });
      let bjIds = this.$route.query.bjIdList.split(',');
      bjIds.forEach(v => {
        v = String(v);
      });
      this.prozyList = [];
      const faceXys = !this.queryParams.xyId ? null : [this.queryParams.xyId];
      const faceZys = !this.queryParams.zyId ? null : [this.queryParams.zyId];
      listProzyPost({ xyIds: faceXys, zyIds }).then(response => {
        this.prozyList = response.rows;
      });
      listProbjPost({ xyIds: faceXys, zyIds: faceZys, bjIds }).then(response => {
        this.probjList = response.rows;
      });
    },
    quizXy() {
      enrollCount({ id: this.routeQuery.id, ...this.queryParams }).then((res) => {
        this.total = res.total;
        this.tableList = res.rows;
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('practice/user/performanceExport', {
        id: this.$route.query.id,
        ...this.queryParams,
      }, `任务报名情况.xlsx`)
    },
  }
}
</script>

<style lang="scss" scoped>
.crumbs {
  margin: 10px 0;
  display: flex;

  .fwStyle {
    margin: 0 10px;
    color: #1890ff;
    cursor: pointer;
  }
}

.inforClass {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.inforClass::before {
  content: '';
  width: 5px;
  height: 25px;
  background-color: #419eff;
  margin-right: 10px;
  display: inline-block;
}

::v-deep .el-form-item {
  margin-bottom: 10px !important;
}

.bankLabelStyle {
  display: flex;
  align-items: center;
  margin-left: 20px;
}
</style>
